<extend name="./public/local.html"/>
<block name="content">
    <div class="layui-row">
        <div class="layui-col-xs4 box">
            <div class="trajectory_search">
                <ul>
                    <li class="title">轨迹查询</li>
                    <li class="calendar">
                        <span class="icon"></span>
                        <input type="text" class="ipt-date" id="date" placeholder="选择查询日期" readonly/>
                    </li>
                    <li ><button class="search">查询</button></li>
                </ul>
            </div>
            <div class="driver_info">
                <p class="title">车辆信息</p>
                <img class="car_img" src="{$body_img}" alt="车辆图片" title="车辆图片"/>
                <ul>
                    <li>时速：<span id="speed"></span></li>
                    <li>方向：<span id="direction"></span></li>
                    <!--<li>平均速度：<span id="avg_s"></span></li>-->
                    <li>车牌号码：{$car_plate}</li>
                </ul>
            </div>
        </div>
        <div class="layui-col-xs8 map">
            <div id="contain" class="trajectory_container"></div>
            <button id="back">定位</button>
        </div>
    </div>
    <script>
        window.onload = function (){initMap('init');};
        var driver_id = "{$driver_id}",auth_type = "{$auth_type}";
        var map,marker,timeVal,pathSimplifierIns,cycle=15000;
        function initMap(type){
            $.post("{$url['coordinate']}", {driver_id: driver_id,auth_type:auth_type}, function (res) {
                if (res['status']) {
                    var data = res['data'];
                    var coordinate = data['location']['coordinates'];
                    if(type==='init'){
                        map = new AMap.Map("contain", {
                            resizeEnable: true,
                            center: coordinate,
                            zoom: 16
                        });
                    }else{
                        map.setCenter(coordinate);
                    }
                    setMarker(coordinate,data['direction']);
                    renewData(data);
                    timeVal = setInterval(updateMarker,cycle);
                } else {
                    layer.alert(res['msg'],{icon:2});
                }
            });
        }
        function updateMarker() {
            $.post("{$url['coordinate']}", {driver_id: driver_id,auth_type:auth_type}, function (res) {
                if (res['status']) {
                    var data = res['data'];
                    var coordinate = data['location']['coordinates'];
                    map.remove(marker);
                    map.setZoomAndCenter(16, coordinate);
                    setMarker(coordinate,data['direction']);
                    renewData(data);
                } else {
                    alert(res['msg']);
                    clearInterval(timeVal);
                }
            });
        }
        function setMarker(coordinate,direction) {
            marker = new AMap.Marker({
                position: coordinate,
                offset: new AMap.Pixel(-20, -10),
                angle : direction,
                icon: new AMap.Icon({
                    size: new AMap.Size(41, 19),  //图标大小
                    image: "{$icon_img}",
                    imageOffset: new AMap.Pixel(0, 0),
                    imageSize:new AMap.Size(41, 19)
                }),
                autoRotation:true,
                title: "{$title}"
            });
            marker.setMap(map);
        }
        function renewData(data) {
            $('#speed').html(data['speed']);
            $('#direction').html(data['direction']);
            // $('#avg_s').html(data['avg_s']);
        }

        function initPage(PathSimplifier, $, data) {
            var emptyLineStyle = {
                lineWidth: 0,
                fillStyle: null,
                strokeStyle: null,
                borderStyle: null
            };

            pathSimplifierIns = new PathSimplifier({
                zIndex: 100,
                //autoSetFitView:false,
                map: map, //所属的地图实例

                getPath: function(pathData, pathIndex) {

                    return pathData.path;
                },
                getHoverTitle: function(pathData, pathIndex, pointIndex) {

                    if (pointIndex >= 0) {
                        //point
                        return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                    }

                    return pathData.name + '，点数量' + pathData.path.length;
                },
                renderOptions: {
                    pathLineStyle: {
                        lineWidth: 3,
                        strokeStyle: '#ef00ff',
                        borderWidth: 1,
                        borderStyle: '#c6c6ca',
                        dirArrowStyle: false
                    },
                    renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
                }
            });

            pathSimplifierIns.setData([{
                name: '测试',
                path: data['coordinate']
            }]);

            function onload() {
                pathSimplifierIns.renderLater();
            }

            function onerror(e) {
                alert('图片加载失败！');
            }

            var pathNavigatorStyles = [
                {
                    width: 16,
                    height: 32,
                    //使用图片
                    content: PathSimplifier.Render.Canvas.getImageContent(data['img'], onload, onerror),
                }
            ];


            function extend(dst) {
                if (!dst) {
                    dst = {};
                }

                var slist = Array.prototype.slice.call(arguments, 1);

                for (var i = 0, len = slist.length; i < len; i++) {
                    var source = slist[i];

                    if (!source) {
                        continue;
                    }

                    for (var prop in source) {
                        if (source.hasOwnProperty(prop)) {
                            dst[prop] = source[prop];
                        }
                    }
                }
                return dst;
            }

            var idx = 0;
//对第一条线路（即索引 0）创建一个巡航器
            var navg1 = pathSimplifierIns.createPathNavigator(0, {
                loop: true,
                speed: 1000,
                pathNavigatorStyle: extend({}, pathNavigatorStyles[0])
            });

            navg1.start();

            function changeNavgContent() {

                //获取到pathNavigatorStyle的引用
                var pathNavigatorStyle = navg1.getStyleOptions();

                //覆盖修改
                extend(pathNavigatorStyle, pathNavigatorStyles[(++idx) % pathNavigatorStyles.length]);

                //重新绘制
                pathSimplifierIns.renderLater();
            }

            setInterval(changeNavgContent, 500);
        }
    </script>
    <script type="application/javascript">
        layui.use(['laydate','layer'], function () {
            var laydate = layui.laydate,layer = layui.layer,$=layui.jquery;
            laydate.render({
                elem: '#date' //指定元素
                ,max: -1
                ,trigger: 'click'
            });
            $('.search').on('click',function () {
                var date = $('#date').val();
                if(!date){
                    layer.alert('请选择日期',{icon:3});
                    return false;
                }
                $.post("{$url['trajectory']}",{driver_id:driver_id,auth_type:auth_type,date:date},function (res) {
                    switch (res['status']){
                        case 1:
                            AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
                                if (!PathSimplifier.supportCanvas) {
                                    alert('当前环境不支持 Canvas！');
                                    return;
                                }
                                marker.setMap(null);clearInterval(timeVal);
                                initPage(PathSimplifier, $, res);
                                $('#back').show();
                            });
                            break;
                        default:
                            layer.alert(res['msg'],{icon: 5});
                            break;
                    }
                })
            });
            $('#back').on('click',function () {
                $('#date').val('');
                pathSimplifierIns.setData(null);
                initMap();
                $(this).hide();
            })
        });
    </script>
</block>